<template>
    <div class="seting-main">
        <PublicHader></PublicHader>
        <div class="content">
            <el-row>
<!--                第一排-->
                <el-col :span="13">
                    <div class="bg-purple">
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                            <el-menu-item  class="list-box">
                                <li
                                        @click="clickCategory(1), (cur = 1)"
                                        :class="{ active: categoryIndex == 1 }"
                                >
                                    <el-menu-item index="1">我创建的收藏夹</el-menu-item>
                                </li>
                            </el-menu-item>
                            <el-menu-item  class="list-box">
                                <li
                                        @click="clickCategory(1), (cur = 2)"
                                        :class="{ active: categoryIndex == 1 }"
                                >
                                    <el-menu-item index="1">我关注的收藏夹</el-menu-item>
                                </li>
                            </el-menu-item>
                            <el-button type="text" class="but" @click="handleadd">新建收藏夹</el-button>
                        </el-menu>
                        <el-dialog class="title"  :visible.sync="dialogFormVisible">
                            <h3>创建新收藏夹</h3>
                            <el-input
                                    :label-width="formLabelWidth"
                                    class="chang"
                                    placeholder="收藏标题"
                                    v-model="fake"
                            >
                            </el-input>
                            <el-input
                                    class="chang"
                                    type="textarea"
                                    placeholder="收藏描述(可选)"
                                    v-model="input"
                            >
                            </el-input>
                            <el-radio v-model="radio" label="1">公开</el-radio>
                            <el-radio v-model="radio" label="2">私密</el-radio>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </el-col>
                <el-col :span="6" style="margin-left: 20px">
                    <div class="grid-content">
                        <div class="right-header">
                            <div class="right-header-son">
                                <span>
                                    <i style="font-size: 22px" class="iconfont icon-xinxi"></i>
                                </span>
                                <h1>回答问题</h1>
                            </div>
                            <div class="right-header-son">
                                <span>
                                    <i style="font-size: 22px" class="iconfont icon-shipin- yellow"></i>
                                </span>
                                <h1>发视频</h1>
                            </div>
                            <div class="right-header-son">
                                <span>
                                    <i style="font-size: 22px" class="iconfont icon-bianji"></i>
                                </span>
                                <h1>写文章</h1>
                            </div>
                            <div class="right-header-son">
                                <span>
                                    <i style="font-size: 22px" class="iconfont icon-weibiaoti- green"></i>
                                </span>
                                <h1>写感想</h1>
                            </div>
                        </div>
                        <div class="right-header-footer">
                            <div class="footer-left"><a href="#">稍后答</a></div>
                            <div class="footer-right"><a href="#">草稿箱</a></div>
                        </div>
                    </div>
                </el-col>

<!--               第一排左边的一份-->
                <el-col :span="13">
                    <div  v-show="cur == 1" class="bg-purple-son">
                        <div class="floder-one">
                            <div class="floder-one-son">
                                <el-button class="cole-one" type="text">我的收藏</el-button>
                                <i class="el-icon-star-off"></i>
                            </div>
                            <div class="floder-one-brother">
                                <div class="Information">2020-11-12 更新 · 5 条内容 · 0 人关注</div>
                                <div class="Operation">
                                    <i class="el-icon-chat-round"></i>
                                    <el-button @click="handleComment" class="cole" type="text">
                                        添加评论
                                    </el-button>
                                    <i class="el-icon-edit-outline"></i>
                                    <el-button class="cole" type="text" @click="dialogFormVisible = true">
                                        编辑
                                    </el-button>
                                    <i class="el-icon-delete"></i>
                                    <el-button class="cole" type="text" @click="centerDialogVisible = true">
                                        删除
                                    </el-button>
                                </div>
                            </div>
<!--                            添加评论弹出框-->
                            <el-dialog width="70%"  class="title"  :visible.sync="PComment">
                                <div class="comment-title">
                                    <div class="title-son">
                                        <h2>还没有评论</h2>
                                    </div>
                                    <div class="title-main"></div>
                                </div>
                                <div slot="footer" class="dialog-footer">
                                    <el-input class="kuan" v-model="input" placeholder="写下你的评论"></el-input>
                                    <el-button type="primary" style="margin-left: 10px" @click="PComment = false"> 评 论</el-button>
                                </div>
                            </el-dialog>
<!--                            添加编辑的弹出框-->
                            <el-dialog class="title"  :visible.sync="dialogFormVisible">
                                <h3>编辑收藏夹</h3>
                                <el-input
                                        :label-width="formLabelWidth"
                                        class="chang"
                                        placeholder="收藏标题"
                                        v-model="fake"
                                >
                                </el-input>
                                <el-input
                                        class="chang"
                                        type="textarea"
                                        placeholder="收藏描述(可选)"
                                        v-model="input"
                                >
                                </el-input>
                                <el-radio v-model="radio" label="1">公开</el-radio>
                                <el-radio v-model="radio" label="2">私密</el-radio>
                                <div slot="footer" class="dialog-footer">
                                    <el-button style="width: 40%;margin-left: 8%" @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button style="width: 40%" type="primary">确 定</el-button>
                                </div>
                            </el-dialog>
<!--                            添加删除的弹出框-->
                            <el-dialog
                                    title="删除收藏夹"
                                    :visible.sync="centerDialogVisible"
                                    width="30%"
                                    center>
                                <span>
<!--                                    你确认要删除这个收藏夹吗？-->
                                </span>
                                <span slot="footer" class="dialog-footer">
                                <el-button style="width: 40%;margin-left: 5%" @click="centerDialogVisible = false">取 消</el-button>
                                <el-button style="width: 40%" type="primary" @click="centerDialogVisible = false">确 定</el-button>
                                </span>
                            </el-dialog>
                        </div>
                        <div class="floder-one">
                            <div class="floder-one-son">
                                <el-button class="cole-one" type="text">我的收藏</el-button>
                                <i class="el-icon-star-off"></i>
                            </div>
                            <div class="floder-one-brother">
                                <div class="Information">2020-11-12 更新 · 5 条内容 · 0 人关注</div>
                                <div class="Operation">
                                    <i class="el-icon-chat-round"></i>
                                    <el-button @click="handleComment" class="cole" type="text">
                                        添加评论
                                    </el-button>
                                    <i class="el-icon-edit-outline"></i>
                                    <el-button class="cole" type="text" @click="dialogFormVisible = true">
                                        编辑
                                    </el-button>
                                    <i class="el-icon-delete"></i>
                                    <el-button class="cole" type="text" @click="centerDialogVisible = true">
                                        删除
                                    </el-button>
                                </div>
                            </div>
                            <!--                            添加评论弹出框-->
                            <el-dialog width="70%"  class="title"  :visible.sync="PComment">
                                <div class="comment-title">
                                    <div class="title-son">
                                        <h2>还没有评论</h2>
                                    </div>
                                    <div class="title-main"></div>
                                </div>
                                <div slot="footer" class="dialog-footer">
                                    <el-input class="kuan" v-model="input" placeholder="写下你的评论"></el-input>
                                    <el-button type="primary" style="margin-left: 10px" @click="PComment = false"> 评 论</el-button>
                                </div>
                            </el-dialog>
                            <!--                            添加编辑的弹出框-->
                            <el-dialog class="title"  :visible.sync="dialogFormVisible">
                                <h3>编辑收藏夹</h3>
                                <el-input
                                        :label-width="formLabelWidth"
                                        class="chang"
                                        placeholder="收藏标题"
                                        v-model="fake"
                                >
                                </el-input>
                                <el-input
                                        class="chang"
                                        type="textarea"
                                        placeholder="收藏描述(可选)"
                                        v-model="input"
                                >
                                </el-input>
                                <el-radio v-model="radio" label="1">公开</el-radio>
                                <el-radio v-model="radio" label="2">私密</el-radio>
                                <div slot="footer" class="dialog-footer">
                                    <el-button style="width: 40%;margin-left: 8%" @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button style="width: 40%" type="primary">确 定</el-button>
                                </div>
                            </el-dialog>
                            <!--                            添加删除的弹出框-->
                            <el-dialog
                                    title="删除收藏夹"
                                    :visible.sync="centerDialogVisible"
                                    width="30%"
                                    center>
                                <span>
                                    你确认要删除这个收藏夹吗？
                                </span>
                                <span slot="footer" class="dialog-footer">
                                <el-button style="width: 40%;margin-left: 5%" @click="centerDialogVisible = false">取 消</el-button>
                                <el-button style="width: 40%" type="primary" @click="centerDialogVisible = false">确 定</el-button>
                                </span>
                            </el-dialog>
                        </div>
                    </div>
                </el-col>











<!--                第一排右边的一份-->
                <el-col :span="13">
                    <div v-show="cur == 2" class="tool"></div>
                </el-col>
                <el-col :span="6" style="margin-left: 20px">
                    <div v-show="cur == 2" class="grid-content-son">
                        <div class="content-son-title">
                            <i class="el-icon-hot-water"></i>
                            <span>我的圈子</span>
                        </div>
                        <div class="content-son-list">
                            <div class="son-list-item"><img src="../../assets/collection/wzry.jpg" height="70" width="70"/></div>
                            <div class="son-list-item"><img src="../../assets/collection/wzry.jpg" height="70" width="70"/></div>
                        </div>
                        <el-pagination
                                class="page"
                                small
                                layout="prev, pager, next"
                                :total="2">
                        </el-pagination>
                    </div>
                </el-col>
                <el-col :span="6" style="margin-left: 20px"></el-col>
<!--                第一排的二份-->
                <el-col :span="13">
                    <div v-show="cur == 1" class="bg-purple-son-borther">
                        <div class="floder-one">
                            <div class="floder-one-son">
                                <el-button class="cole-one" type="text">我的收藏</el-button>
                                <i class="el-icon-star-off"></i>
                            </div>
                            <div class="floder-one-brother">
                                <div class="Information">2020-11-12 更新 · 5 条内容 · 0 人关注</div>
                                <div class="Operation">
                                    <i class="el-icon-chat-round"></i>
                                    <el-button @click="handleComment" class="cole" type="text">
                                        添加评论
                                    </el-button>
                                    <i class="el-icon-edit-outline"></i>
                                    <el-button class="cole" type="text" @click="dialogFormVisible = true">
                                        编辑
                                    </el-button>
                                    <i class="el-icon-delete"></i>
                                    <el-button class="cole" type="text" @click="centerDialogVisible = true">
                                        删除
                                    </el-button>
                                </div>
                            </div>
                            <!--                            添加评论弹出框-->
                            <el-dialog width="70%"  class="title"  :visible.sync="PComment">
                                <div class="comment-title">
                                    <div class="title-son">
                                        <h2>还没有评论</h2>
                                    </div>
                                    <div class="title-main"></div>
                                </div>
                                <div slot="footer" class="dialog-footer">
                                    <el-input class="kuan" v-model="input" placeholder="写下你的评论"></el-input>
                                    <el-button type="primary" style="margin-left: 10px" @click="PComment = false"> 评 论</el-button>
                                </div>
                            </el-dialog>
                            <!--                            添加编辑的弹出框-->
                            <el-dialog class="title"  :visible.sync="dialogFormVisible">
                                <h3>编辑收藏夹</h3>
                                <el-input
                                        :label-width="formLabelWidth"
                                        class="chang"
                                        placeholder="收藏标题"
                                        v-model="fake"
                                >
                                </el-input>
                                <el-input
                                        class="chang"
                                        type="textarea"
                                        placeholder="收藏描述(可选)"
                                        v-model="input"
                                >
                                </el-input>
                                <el-radio v-model="radio" label="1">公开</el-radio>
                                <el-radio v-model="radio" label="2">私密</el-radio>
                                <div slot="footer" class="dialog-footer">
                                    <el-button style="width: 40%;margin-left: 8%" @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button style="width: 40%" type="primary">确 定</el-button>
                                </div>
                            </el-dialog>
                            <!--                            添加删除的弹出框-->
                            <el-dialog
                                    title="删除收藏夹"
                                    :visible.sync="centerDialogVisible"
                                    width="30%"
                                    center>
                                <span>
                                    你确认要删除这个收藏夹吗？
                                </span>
                                <span slot="footer" class="dialog-footer">
                                <el-button style="width: 40%;margin-left: 5%" @click="centerDialogVisible = false">取 消</el-button>
                                <el-button style="width: 40%" type="primary" @click="centerDialogVisible = false">确 定</el-button>
                                </span>
                            </el-dialog>


                        </div>
                        <div class="floder-one">
                            <div class="floder-one-son">
                                <el-button class="cole-one" type="text">我的收藏</el-button>
                                <i class="el-icon-star-off"></i>
                            </div>
                            <div class="floder-one-brother">
                                <div class="Information">2020-11-12 更新 · 5 条内容 · 0 人关注</div>
                                <div class="Operation">
                                    <i class="el-icon-chat-round"></i>
                                    <el-button @click="handleComment" class="cole" type="text">
                                        添加评论
                                    </el-button>
                                    <i class="el-icon-edit-outline"></i>
                                    <el-button class="cole" type="text" @click="dialogFormVisible = true">
                                        编辑
                                    </el-button>
                                    <i class="el-icon-delete"></i>
                                    <el-button class="cole" type="text" @click="centerDialogVisible = true">
                                        删除
                                    </el-button>
                                </div>
                            </div>
                            <!--                            添加评论弹出框-->
                            <el-dialog width="70%"  class="title"  :visible.sync="PComment">
                                <div class="comment-title">
                                    <div class="title-son">
                                        <h2>还没有评论</h2>
                                    </div>
                                    <div class="title-main"></div>
                                </div>
                                <div slot="footer" class="dialog-footer">
                                    <el-input class="kuan" v-model="input" placeholder="写下你的评论"></el-input>
                                    <el-button type="primary" style="margin-left: 10px" @click="PComment = false"> 评 论</el-button>
                                </div>
                            </el-dialog>
                            <!--                            添加编辑的弹出框-->
                            <el-dialog class="title"  :visible.sync="dialogFormVisible">
                                <h3>编辑收藏夹</h3>
                                <el-input
                                        :label-width="formLabelWidth"
                                        class="chang"
                                        placeholder="收藏标题"
                                        v-model="fake"
                                >
                                </el-input>
                                <el-input
                                        class="chang"
                                        type="textarea"
                                        placeholder="收藏描述(可选)"
                                        v-model="input"
                                >
                                </el-input>
                                <el-radio v-model="radio" label="1">公开</el-radio>
                                <el-radio v-model="radio" label="2">私密</el-radio>
                                <div slot="footer" class="dialog-footer">
                                    <el-button style="width: 40%;margin-left: 8%" @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button style="width: 40%" type="primary">确 定</el-button>
                                </div>
                            </el-dialog>
                            <!--                            添加删除的弹出框-->
                            <el-dialog
                                    title="删除收藏夹"
                                    :visible.sync="centerDialogVisible"
                                    width="30%"
                                    center>
                                <span>
                                    你确认要删除这个收藏夹吗？
                                </span>
                                <span slot="footer" class="dialog-footer">
                                <el-button style="width: 40%;margin-left: 5%" @click="centerDialogVisible = false">取 消</el-button>
                                <el-button style="width: 40%" type="primary" @click="centerDialogVisible = false">确 定</el-button>
                                </span>
                            </el-dialog>


                        </div>
                    </div>
                </el-col>
                <el-col :span="13">
                    <div v-show="cur == 2" class="tool"></div>
                </el-col>
                <el-col :span="6" style="margin-left: 20px">
                    <div v-show="cur == 2" class="grid-content-another">
                        <div class="right-header-borther">
                            <i class="el-icon-user"></i>
                            创作中心
                            <span>Lv Max</span>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="right-header">
                            <div class="right-header-another">
                                <div class="another">昨日被阅读数</div>
                                <div class="ProfileSideCreator-readCountNumber">MAX</div>
                                <div class="another">较前日</div>
                            </div>
                            <div class="right-header-another">
                                <div class="another">昨日获赞同数</div>
                                <div class="ProfileSideCreator-readCountNumber">MAX</div>
                                <div class="another">较前日</div>
                            </div>
                        </div>
                        <div class="right-header-footer">
                            <div class="header-footer-bouttom">瓦力保镖为你的创作提供持续保护<i class="el-icon-star-on"></i></div>
                        </div>
                    </div>
                </el-col>
                <!--                右边版块的构图-->
                <el-col :span="13">
                    <div v-show="cur == 2" class="tool"></div>
                </el-col>
                <el-col :span="6" style="margin-left: 20px">
                    <div v-show="cur == 2" class="grid-another">
                        <img src="../../assets/collection/guanggao.png" height="225" width="306"/>
                    </div>
                </el-col>
                <el-col :span="13">
                    <div class="tool"></div>
                </el-col>
                <el-col :span="6" style="margin-left: 20px">
                    <div v-show="cur == 2" class="grid-another">
                        <div class="list-boss">
                           <div class="content-another-list"><i class="el-icon-star-on"></i>我的收藏</div>
                           <div class="content-another-list"><i class="el-icon-question"></i>我关注的问题</div>
                           <div class="content-another-list"><i class="el-icon-circle-plus"></i>我的邀请</div>
                           <div class="content-another-list"><i class="el-icon-s-finance"></i>我的余额</div>
                           <div class="content-another-list"><i class="el-icon-s-comment"></i>站务中心</div>
                           <div class="content-another-list"><i class="el-icon-service"></i>帮助中心</div>
                           <div class="content-another-list"><i class="el-icon-s-promotion"></i>版权服务中心</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="13">
                    <div class="tool"></div>
                </el-col>
                <el-col :span="6" style="margin-left: 20px">
                    <div v-show="cur == 2" class="grid-another">
                        <img src="../../assets/collection/guanggao.png" height="225" width="306"/>
                    </div>
                </el-col>
                <el-col :span="13">
                    <div v-show="cur == 2" class="tool"></div>
                </el-col>
                <el-col :span="6" style="margin-left: 20px">
                    <div v-show="cur == 2" class="grid-another-one">
                        <div class="footer">
                            <a href="#">
                                刘看山<span></span>
                            </a>
                            <a href="#">
                                知乎指南<span></span>
                            </a>
                            <a href="#">
                                知乎协议<span></span>
                            </a>
                            <a href="#">
                                知乎隐私保护指引
                            </a>
                            <a href="#">
                                应用 <span></span>
                            </a>
                            <a href="#">
                                工作 <span></span>
                            </a>
                            <a href="#">
                                申请开通知乎机构号
                            </a>
                        </div>
                        <div class="footer">
                            <a href="#">
                                侵权举报 <span></span>
                            </a>
                            <a href="#">
                                网上有害信息举报专区
                            </a>
                        </div>
                        <div class="footer">
                            <a href="#">
                                京 ICP 证 110745 号
                            </a>
                        </div>
                        <div class="footer">
                            <a href="#">
                                京 ICP 备 13052560 号 - 1
                            </a>
                        </div>
                        <div class="footer">
                            <a href="#">
                                <img src="../../assets/collection/jingcha.png" height="20" width="20"/>
                                京公网安备 11010802010035 号
                            </a>
                        </div>
                        <div class="footer">
                            <a href="#">
                                互联网药品信息服务资格证书
                            </a>
                        </div>
                        <div class="footer">
                            <a href="#">
                                （京）- 非经营性 - 2017 - 0067违法和不良信息举报：010-82716601
                            </a>
                        </div>
                        <div class="footer">
                            <a href="#">
                                儿童色情信息举报专区
                            </a>
                        </div>
                        <div class="footer">
                            <a href="#">
                                证照中心
                            </a>
                        </div>
                        <div class="footer">
                            <a href="#">
                                联系我们 © 2020 知乎
                            </a>
                        </div>
                    </div>
                </el-col>

            </el-row>
        </div>
    </div>


</template>

<script>
    import PublicHader from "../seting/components/PublicHader";
    export default {
        name: "Collection",
        data(){
            return{
                activeIndex: '1',
                dialogFormVisible: false,
                PComment:false,
                formLabelWidth:'150px',
                centerDialogVisible: false,
                input: '',
                fake:'',
                radio:'1',
                cur: 1,
                categoryIndex: 1, //点击当前背景变成白色索引
            };
        },
        components:{
            PublicHader,
        },
        methods:{
            handleadd() {
                this.dialogFormVisible = true
            },
            handleComment(){
                this.PComment = true
            },
            clickCategory(index) {
                // 这里我们传入一个当前值
                this.categoryIndex = index;
            },
        }
    }
</script>

<style scoped>
    /*第一排的按钮*/

    .seting-main{
        height: 100%;
        /*width: 100%;*/
        background: rgb(246,246,246);
        /*border: 1px solid red;*/
        box-sizing: content-box;
    }
    .content{
        padding-top: 65px;
        margin-left: 19%;
    }
    .bg-purple {
        background: rgb(255,255,255);
        border-radius: 4px;
        min-height: 36px;
        border: 1px solid #d3d3d3;
        /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
    }
    .bg-purple-son{
        margin-top: -70px;
        background: rgb(255,255,255);
        border-radius: 4px;
        min-height: 36px;
        border: 1px solid #d3d3d3;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .bg-purple-son-borther{
        background: rgb(255,255,255);
        border-radius: 4px;
        min-height: 36px;
        border: 1px solid #d3d3d3;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .grid-content {
        background: rgb(255,255,255);
        border-radius: 4px;
        min-height: 36px;
        /*border: 1px solid red;*/
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .grid-content-another{
        margin-top: 5%;
        background: rgb(255,255,255);
        border-radius: 4px;
        min-height: 36px;
        /*border: 1px solid red;*/
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .grid-content-another .list-boss-one{
        display: flex;
        flex-direction: column;
        height: 150px;
    }
    .content-another-item{
        flex: 1;
        display: flex;
        line-height: 35px;
        padding: 0 20px;
        font-size: 14px;
        color: #8590a6;
        border: 1px solid red;
    }
    .content-another-item div{
        flex: 1;
        /*margin: 5%;*/
        margin-top: 5%;
        border: 1px solid red;
        text-align: center;
    }
    .content-another-list{
        flex: 1;
        display: flex;
        line-height: 35px;
        padding: 0 20px;
        font-size: 14px;
        color: #8590a6;
    }
    .content-another-list:hover{
        background: rgb(246,246,246);
    }
    .content-another-list i{
        margin-top: 10px;
        margin-right: 5px;
    }
    .content-another-list div{
        flex: 1;
        border: 1px solid red;
    }
    .grid-another{
        margin-top: 5%;
        background: rgb(255,255,255);
        border-radius: 4px;
        min-height: 36px;
        /*border: 1px solid rgb(246,246,246);*/
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .grid-another-one{
        margin-top: 5%;
        background: rgb(255,255,255);
        border-radius: 4px;
        min-height: 36px;
        /*border: 1px solid rgb(246,246,246);*/
    }
    .ProfileSideCreator-readCountNumber{
        font-size: 18px;
    }
    .grid-content-son{
        margin-top: 5%;
        background: rgb(255,255,255);
        border-radius: 4px;
        min-height: 36px;
        /*border: 1px solid red;*/
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .grid-content-son .content-son-title{
        margin: 20px 0 20px 20px;
        padding-top: 10px;
    }
    .page{
        margin-left: 32%;
    }
    .kuan{
        width: 85%;
    }
    .content-son-list{
        display: flex;
        height: 100px;
        border-top: 1px solid rgb(246,246,246);
        /*border: 1px solid red;*/
    }
    .son-list-item{
        flex: 1;
        border-bottom: 1px solid rgb(246,246,246);
    }
    .son-list-item img{
        margin: 10% 0 0 30%;
    }
    /*解决新建收藏夹按钮偏左上的问题*/
    .but{
        display: inline-block;
        float: right;
        margin-top: 10px;
        padding-right: 20px;
    }

    /*解决新建收藏夹标题bug问题*/
    .title h3{
        text-align: center;
        font-size: 24px;
        font-weight: normal;
        color: black;
        margin-bottom: 20px;
    }
    .title{
        margin: 0 auto;
        width: 60%;
    }
    /*解决窗口大小与知乎不匹配的问题*/
    .chang{
        margin-bottom: 20px;
    }
    /*右边的网页设计*/
    .right-header{
        display: flex;
        padding-top: 10px;
        height: 100%;
        width: 100%;
        text-align: center;
    }
    .right-header-son{
        flex: 1;
        height: 80px;
        /*border: 1px solid red;*/
        border-bottom: 1px solid rgb(246,246,246);
        font-weight: lighter;
    }
    .right-header-son span{
        margin-top: 10px;
        /*margin-left: 3px;*/
        color: rgba(0,132,255,0.76);
        display: inline-block;
        width: 44px;
        height: 44px;
        background: rgba(0,132,255,.06);
        border-radius: 22px;
        font-size: 12px;
    }
    .right-header-son i{
        display: inline-block;
        margin-top: 10px;
    }
    .right-header-son h1{
        margin-top: 5px;
        font-size: 12px;
        color: #444444;
    }
    .yellow{
        color: rgba(255,150,7,0.76);
        background: rgba(255,243,226,0.76);
    }
    .green{
        color: rgba(38,191,191,0.76);
        background: rgba(229,247,247,0.76);
    }






    .right-header-another{
        flex: 1;
        height: 80px;
        font-size: 12px;
        line-height: 25px;
        border: 1px solid rgb(246,246,246);
    }
    .another{
        color: #8590a6;
    }
    .right-header-footer{
        display: flex;
        height: 50px;
        text-align: center;
    }
    .header-footer-bouttom{
        font-size: 12px;
        color: rgb(133, 144, 166);
        margin-top: 7%;
        margin-left: 18%;
    }
    .right-header-borther{
        margin-left: 20px;
        margin-top: 20px;
        padding-top: 10px;
    }
    .right-header-borther i:nth-last-child(1){
        margin-left: 90px;
    }
    .right-header-borther span{
        color: rgb(0,132,255);
    }
    .footer-left{
        flex: 1;
        border-right: 1px solid rgb(246,246,246);
    }
    .footer-left a{
        display: inline-block;
        margin-top: 15px;
        color: rgb(133,144,166);
    }
    .footer-right{
        flex: 1;
    }
    .footer-right a{
        display: inline-block;
        margin-top: 15px;
        color: rgb(133,144,166);
    }

/*    文件夹的完善*/
    .floder-one{
        padding:20px;
        border: 1px solid #d3d3d3;
        /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)*/

    }
    .floder-one-brother{
        display: flex;
        margin-top: 20px;
        height: 30px;
        /*border: 1px solid red;*/

    }
    .Information{
        flex: 1;
        margin-top: 10px;
        color: rgb(153,153,153);
        /*border: 1px solid red;*/
    }
    .Operation{
        flex: 1;
        /*border: 1px solid red;*/
    }
    .cole-one{
        margin-right: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #121212;
    }
    .cole{
        margin-left: 5px;
        margin-right: 20px;
        font-size: 14px;
        color: rgb(133,144,166);
    }
/*    评论 编辑 删除弹出框的样式*/
    .comment-title{
        height: 300px;
        width: 300px;
    }
    .dialog-footer{
        text-align: left;
    }
    .title-son{
        font-weight: bold;
        float: left;
        margin-top: -7%;
    }
    .title-main{
        margin-left: 50%;
    }
    /*解决elementui布局问题*/
    .tool{
        margin-top: 5%;
        min-height: 36px;
    }
    .footer{
        line-height: 25px;
        background: rgb(246,246,246);
    }
    .footer a{
        font-size: 13px;
        line-height: 2px;
        color: rgb(133,144,166);
    }
    .footer a:hover{
        color: rgb(23,117,192);
    }
    .footer a span:after{
        margin: 0 5px;
        content: "\B7";
    }
</style>